// 将程序定义在 加载事件中
$(function () {

    // 调用函数动态生成页面
    setPage();

    // 通过 事件委托 给 父级标签添加点击事件
    // const oContainer = document.querySelector('.container');
    // oContainer.addEventListener('click', event => {
    //     // 获取 购物车数据信息  
    //     // 将 json字符串 还原为 对应的数据结构
    //     let cart = JSON.parse(window.localStorage.cart);

    //     // 点击全选标签 
    //     if (event.target.getAttribute('name') === 'all') {
    //         // 获取 全选input标签 checked属性值
    //         // 设定给 购物车数据中 所有商品 buy 属性
    //         cart.forEach(item => {
    //             // 点击标签checked属性 赋值给 购物车商品buy属性存储 
    //             item.buy = event.target.checked;
    //         })


    //     } else if (event.target.getAttribute('name') === 'other') {
    //         // 循环遍历 购物车数据数组 
    //         // 如果 购物车商品的goods_id 和 点击商品的goods_id 相同
    //         // 设定 购物车商品的buy存储 点击标签checked属性值
    //         for (let i = 0; i <= cart.length - 1; i++) {
    //             // i 是 索引下标 
    //             // cart[i] 是 数值中存储的商品数据对象
    //             if (cart[i].goods_id === event.target.getAttribute('goods_id')) {
    //                 //  如果 数组中商品的goods_id 和 点击的商品的goods_id 相同
    //                 //  点击标签的checked属性值 赋值给 数组中商品buy属性
    //                 cart[i].buy = event.target.checked;

    //                 // 终止循环
    //                 break;
    //             }

    //         }

    //         // 如果点击的是 删除标签 
    //     } else if (event.target.getAttribute('name') === 'del') {
    //         // 弹出提示框 确定要删除 再执行程序
    //         if (window.confirm('您确定要删除吗') === false) return;


    //         // 循环遍历 购物车数据数组 
    //         // 如果 购物车商品的goods_id 和 点击商品的goods_id 相同
    //         // 删除 数组中这个商品数据对象 
    //         for (let i = 0; i <= cart.length - 1; i++) {
    //             // i 是 索引下标 
    //             // cart[i] 是 数值中存储的商品数据对象
    //             if (cart[i].goods_id === event.target.getAttribute('goods_id')) {
    //                 // 从 索引下标 i 开始 删除 1 个单元 
    //                 // 因为 当前数组没有存储重复数据 不需要考虑 数组坍塌造成的影响
    //                 cart.splice(i, 1);

    //                 // 终止循环
    //                 break;

    //             }

    //         }


    //         // 如果点击的是 - 标签 
    //     } else if (event.target.getAttribute('name') === '-') {
    //         // 循环遍历 购物车数据数组 
    //         // 如果 购物车商品的goods_id 和 点击商品的goods_id 相同
    //         // 购物车商品的num属性存储的数值累减1 
    //         for (let i = 0; i <= cart.length - 1; i++) {
    //             // i 是 索引下标 
    //             // cart[i] 是 数值中存储的商品数据对象
    //             if (cart[i].goods_id === event.target.getAttribute('goods_id')) {
    //                 // 购物车商品 num属性 累减1
    //                 cart[i].num--;

    //                 // 终止循环
    //                 break;

    //             }

    //         }

    //         // 如果点击的是 + 标签 
    //     } else if (event.target.getAttribute('name') === '+') {
    //         // 循环遍历 购物车数据数组 
    //         // 如果 购物车商品的goods_id 和 点击商品的goods_id 相同
    //         // 购物车商品的num属性存储的数值 累加1
    //         for (let i = 0; i <= cart.length - 1; i++) {
    //             // i 是 索引下标 
    //             // cart[i] 是 数值中存储的商品数据对象
    //             if (cart[i].goods_id === event.target.getAttribute('goods_id')) {
    //                 // 购物车商品 num属性 累加1
    //                 cart[i].num++;

    //                 // 终止循环
    //                 break;

    //             }

    //         }
    //     }




    //     // 将 新数组的数据 写入 localStorage 中 
    //     window.localStorage.cart = JSON.stringify(cart);

    //     // 根据 新的 localStorage 中 存储的购物车数据 
    //     // 再次动态渲染生成页面
    //     setPage();
    // })

})



// 封装一个函数 动态生成页面
function setPage() {
    // 1, 调用 localStorage 中 购物车数据信息
    let cart = window.localStorage.cart;

    // 2, 定义变量 存储 所有商品购买状态
    let bool = true;

    // 3, 定义变量 存储 购物数据
    let type = 0;
    let number = 0;
    let money = 0;

    // 如果 调用的结果是 undefined 
    if (cart === undefined) {
        // 证明 没有 购物车 键值对 
        // 也就是 第一次购物 还没有创建购物车信息

        $('.bbb').html('<h1>您是第一次来到本商城 还没有购物记录 您赶紧去放肆购物吧</h1>')

        // 如果 调用结果不是 undefined
    } else {
        // 证明 有 购物车 键值对 
        // json字符串 还原为对应的数据结构
        cart = JSON.parse(cart);

        // 判断 数组 是不是 空数组 
        if (cart.length === 0) {
            // 购物车是空数组 证明是 空车
            $('.bbb').html('<h1>您的购物车已经被好心人清空了 请您赶紧把购物车装满吧</h1>')



        } else {
            // 购物车不是空数组 有 商品数据 
            // 根据商品数据 动态渲染生成页面内容

            // li之前的固定内容
            let str = `
        <div class="panel panel-info ">
          <div class="panel-body bg-info">
            <div class="checkbox">
              <label>
                <input name="all" type="checkbox" value="">
                全选
              </label>
            </div>
          </div>
          <div class="panel-footer">
            <ul class="cart-list">
        `;

            // li是根据 localStorage 中 购物车数组 动态生成 

            cart.forEach(item => {
                // 循环遍历时 判断 item 中 存储的当前商品的购买状态
                // 如果有商品的购买状态是 false 变量 存储false 
                if (item.buy === false) {
                    bool = false;

                    // 当前商品的购买状态时 true 也就是 要购买
                } else {
                    // 计算 购买种类 数量 价格
                    type += 1;
                    number += item.num;
                    money += item.num * item.goods_price;

                }

                str += `
                <div class="container-box">
                <input type="checkbox" class="radio">
                <i><img src="${item.goods_small_logo}" alt=""></i>
                <p>${item.goods_id}</p>
                <span>￥${item.goods_price}</span>
                <div class="add">
                    <div class="add-boxs"></div>
                    <strong class="reduce-one">一</strong> 
                    <i class="num-one number">1</i>
                    <strong class="add-one">＋</strong>
                </div>
                <h5 class="money-one nowmoney">￥749</h5>
                <a href="javascript:;" class="btn" title="删除">X</a>
            </div>
        
          
          `;

            })



            // li之后的内容 是 固定内容
        let    str1 = `
            <div class="bill-left">
            <input type="checkbox" class="all-choose all-txt-bill">
            <span class="all-txt ">全选</span>
            <li><span>已选</span><i class="quantity">0件</i></li>
        </div>
        <p class="again" style="cursor:pointer;color: red;">重新加载</p>
        <div class="bill-right">
            <p><span>合计:</span><i class="results">￥0.00</i></p>
            <a href="javascript:;" class="go-bill">去结算</a>
        </div> 
        `;

            // 将 生成的字符串 写入页面
            $('.bbb').html(str);
            $('.bill bill-nav').html(str1)

            // 将标签写入后 设定 全选标签的属性
            $('[name="all"]').prop('checked', bool);
        }


    }




}


